<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{block name='title'}请登录{/block}</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>

    <body>
        <!-- 样式 -->
        {block name='style'}{/block}
        <div style="padding: 15px;">
            <!-- 表单 -->
            {block name='form'}
            <form class="layui-form">
                <!-- 表单头部 -->
                {block name='head'}{/block}
                <!-- 表单字段 -->
                {block name='fields'}
                <div class="layui-form-item">
                    <div class="layui-form-label">用户名</div>
                    <div class="layui-input-block">
                        <input type="text" name="username" value="admin" required lay-verify="required" placeholder="请输入用户名"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">密码</div>
                    <div class="layui-input-block">
                        <input type="password" name="password" value="123456" required lay-verify="required"
                            autocomplete="off" placeholder="请输入密码" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-block captcha" style="display: flex;align-items: center;">
                        <input type="text" name="captcha" value="" style="width: 80px; margin-right: 10px;" required
                            lay-verify="required" autocomplete="off" placeholder="验证码" class="layui-input">
                        {if function_exists('captcha_src')}
                        <img src="{:captcha_src()}" alt="captcha"
                            onclick="this.src='{:captcha_src()}?rand='+ Math.random()"
                            style="width: 90px;height: 36px;border: 1px solid #eee;cursor: pointer;" />
                        {else /}
                        <div class="layui-form-mid layui-word-aux">验证码组件未安装</div>
                        {/if}
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="remember" value="0">
                        <input type="checkbox" name="remember" value="1" lay-skin="primary" title="记住我" checked>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="login">登录</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                {/block}
            </form>
            {/block}
        </div>

        <!-- js -->
        {block name='js'}
        <script>
            // 请求路径
            var url = "";
        </script>
        {/block}

        <script>
            // JS
            layui.use(['form'], function () {
                var form = layui.form,
                    $ = layui.$;
                // 监听提交
                form.on("submit(login)", function (data) {
                    $.post(url, data.field, function (res) {
                        if (res.code) {
                            return layer.alert(res.msg, {
                                icon: 2
                            });
                        }
                        layer.alert(res.msg, {
                            icon: 1
                        });
                        setTimeout(function () {
                            var _ta = window.location;
                            if (self.frameElement && self.frameElement.tagName == 'IFRAME') {
                                _ta = parent.window.location;
                            }
                            if (typeof redirect !== 'undefined' && redirect) {
                                _ta.href = redirect;
                            } else if (typeof res.url !== 'undefined' && res.url) {
                                _ta.href = res.url;
                            } else {
                                _ta.reload();
                            }
                        }, 1000);
                    }, "json");
                    return false;
                });
            });
        </script>
    </body>

</html>